<template>
  <div>
    <div class="conter">
      <div
        class="conter_div"
        v-for="item in list"
        :key="item.id"
        @click="nav(item.title)"
      >
        <img :src="item.pic" alt="" />
        <p>{{ item.title }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          pic: require("../../assets/img/wKjFbWLWZ5CAWCvXAAAeN4LoF-g478.png"),
          title: "帐篷露营",
        },
        {
          pic: require("../../assets/img/wKjFbWBdhhGAf42GAAAPDSnsjzU332.png"),
          title: "餐卷美食",
        },
        {
          pic: require("../../assets/img/wKjFbGLWZ5CAInP5AAAhMsRvcLE877.png"),
          title: "城市观光",
        },
        {
          pic: require("../../assets/img/wKjFbF_ioE6ACqupAAAO6L5cjBw819.png"),
          title: "城市微游",
        },
        {
          pic: require("../../assets/img/wKjFbGFACHOAByO0AAAP6-xxZH8606.png"),
          title: "迪士尼",
        },
        {
          pic: require("../../assets/img/wKjFbF3TRqKAMPVMAAALqECID6c496.png"),
          title: "酒店",
        },
      ],
    };
  },
  methods: {
    nav(title) {
      switch (title) {
        case "帐篷露营":
          this.$router.push("/camp");
          break;
        case "餐卷美食":
          this.$router.push("/footer");
          break;
        case "城市观光":
          this.$router.push("/city");
          break;
        case "酒店":
          this.$router.push("/hotel");
          break;
        case "迪士尼":
          this.$router.push("/dis");
          break;
        case "城市微游":
          this.$router.push('/weiyou');
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.conter {
  width: 100%;
  height: 175px;
  padding: 25px 10px 10px 10px;
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  align-content: flex-start;
  // border-bottom: 10px solid #f3f4f6;
  margin-bottom: 10px;
  .conter_div {
    height: 69px;
    width: 71px;
    img {
      width: 62px;
      height: 50px;
      display: block;
      margin: 0 auto;
    }
    p {
      text-align: center;
    }
  }
}
</style>
